<html>
<head>
    <meta charset="UTF-8" />
    <title>货品数量</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/highcharts-3d.js"></script>
    <script src="../js/vue.js"></script>
    <style>
        #container{
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }

    </style>

</head>
<body>
<div id="container">

</div>
<script type="text/javascript">
   var add = new Vue({
       el:"#container",
       data:{
           productSkuNumberViews:null

       },
       created:function(){
           this.dataProductStoreId();

       },
       methods:{
           dataProductStoreId:function () {
               var  _this = this;
               $.ajax({
                   url:"/selectProductSkuNumber",
                   async:false,
                   success:function (data) {
                       _this.productSkuNumberViews =data.list;
                   },
                   error:function (error) {
                       alert(data.responseJSON.message);
                   },

                });
           }

       }
   });
    var number1 = add.productSkuNumberViews[0].number;
    console.log(number1);
    var product_name1 = add.productSkuNumberViews[0].product_name;
    console.log(product_name1);
   var number2 = add.productSkuNumberViews[1].number;
   var product_name2 = add.productSkuNumberViews[1].product_name;

   var number3 = add.productSkuNumberViews[2].number;
   var product_name3 = add.productSkuNumberViews[2].product_name;

   var number4 = add.productSkuNumberViews[3].number;
   var product_name4 = add.productSkuNumberViews[3].product_name;

   var number5 = add.productSkuNumberViews[4].number;
   var product_name5 = add.productSkuNumberViews[4].product_name;

   var number6 = add.productSkuNumberViews[5].number;
   var product_name6 = add.productSkuNumberViews[5].product_name;

   var number7 = add.productSkuNumberViews[6].number;
   var product_name7 = add.productSkuNumberViews[6].product_name;

   var number8 = add.productSkuNumberViews[7].number;
   var product_name8 = add.productSkuNumberViews[7].product_name;

   var number9 = add.productSkuNumberViews[8].number;
   var product_name9 = add.productSkuNumberViews[8].product_name;

   var number10 = add.productSkuNumberViews[9].number;
   var product_name10 = add.productSkuNumberViews[9].product_name;

   var number11 = add.productSkuNumberViews[10].number;
   var product_name11 = add.productSkuNumberViews[10].product_name;

   var number12 = add.productSkuNumberViews[11].number;
   var product_name12 = add.productSkuNumberViews[11].product_name;

   var number13 = add.productSkuNumberViews[12].number;
   var product_name13 = add.productSkuNumberViews[12].product_name;

   var number14 = add.productSkuNumberViews[13].number;
   var product_name14 = add.productSkuNumberViews[13].product_name;

   $(document).ready(function() {
       var chart = {
           type: 'pie',
           options3d: {
               enabled: true,
               alpha: 45,
               beta: 0
           }
       };
       var title = {
           text: '店铺出售商品的种类数量占用率'
       };
       var tooltip = {
           pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
       };

       var plotOptions = {
           pie: {
               allowPointSelect: true,
               cursor: 'pointer',
               depth: 35,
               dataLabels: {
                   enabled: true,
                   format: '{point.name}'
               }
           }
       };
       var series= [{
           type: 'pie',
           name: 'Browser share',
           data: [
               [product_name1,number1],
               [product_name2,number2],
               [product_name3,number3],
               [product_name4,number4],
               [product_name5,number5],
               [product_name6,number6],
               [product_name7,number7],
               [product_name8,number8],
               [product_name9,number9],
               [product_name10,number10],
               [product_name11,number11],
               [product_name12,number12],
               [product_name13,number13],
               [product_name14,number14],




           ]
       }];
       var json = {};
       json.chart = chart;
       json.title = title;
       json.tooltip = tooltip;
       json.plotOptions = plotOptions;
       json.series = series;
       $('#container').highcharts(json);
   });




</script>
</body>
</html>